<template>
  <teleport to="body">
    <div class="modal fade" id="notifiedMessage" tabindex="-1" aria-labelledby="notifiedMessageLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="notifiedMessageLabel">Modal title</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script>
export default {
  name: 'NotifiedMessage',
  data:function(){
    return {
      randNum: 0
    }
  },
  mounted() {
    this.randNum = Date.now()+Math.floor(Math.random()*1000000);
  },
  props: {
    visible:Boolean,
    title:String,
    content:String
  },
  emits: [ 'update:modelValue'],
  watch:{
    visible:function (newVal,oldVal){
      console.log(newVal)
      console.log(oldVal)
    }
  },
  methods:{
    OpenClose(){
      this.$emit('visible',false)
    },
  },
}
</script>
<style scoped>
.modal{
  background: rgba(0, 0, 0, 0.6);
}
.modal-content{
  border-radius: 2px;
  border: 0;
  /*box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);*/
}
</style>
